import { useState } from 'react'
import Head from 'next/head'
import QuestionCard from '@/components/QuestionCard'
import { questions, CHARACTERS } from '@/data/questions'

export default function Home() {
  const [started, setStarted] = useState(false)
  const [currentQuestion, setCurrentQuestion] = useState(0)
  const [scores, setScores] = useState<{ [key: string]: number }>({})
  const [result, setResult] = useState<string | null>(null)

  const handleStart = () => {
    setStarted(true)
    setCurrentQuestion(0)
    setScores({})
    setResult(null)
  }

  const handleAnswer = (questionScores: { [key: string]: number }) => {
    const newScores = { ...scores }
    Object.entries(questionScores).forEach(([character, score]) => {
      newScores[character] = (newScores[character] || 0) + score
    })
    setScores(newScores)

    if (currentQuestion < questions.length - 1) {
      setCurrentQuestion(currentQuestion + 1)
    } else {
      const result = Object.entries(newScores).reduce((a, b) => 
        newScores[a[0]] > newScores[b[0]] ? a : b
      )[0]
      setResult(result)
    }
  }

  return (
    <div className="min-h-screen bg-[#f8f8f8]">
      <Head>
        <title>再见爱人性格测试</title>
        <meta name="description" content="测测你是再见爱人第四季中的哪位嘉宾" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className="max-w-xl mx-auto px-4 py-8 sm:py-12">
        {!started ? (
          <div className="text-center space-y-6 px-4">
            <div className="mb-12">
              <h1 className="text-3xl sm:text-4xl font-bold text-[#2a2a2a] tracking-tight">
                再见爱人
              </h1>
              <div className="relative">
                <span className="block text-xl sm:text-2xl text-[#666666] mt-2 font-normal">
                  性格测试
                </span>
                <div className="absolute -bottom-4 left-1/2 transform -translate-x-1/2 w-12 h-[2px] bg-[#2a2a2a]"></div>
              </div>
            </div>
            
            <div className="max-w-md mx-auto space-y-6">
              <p className="text-[#666666] text-sm sm:text-base leading-relaxed">
                《再见爱人第四季》是一档深度观察夫妻关系的节目。通过回答以下问题，
                看看你的性格特征最接近节目中的哪位嘉宾。
              </p>
              <div className="flex items-center justify-center space-x-2 text-[#999999] text-sm">
                <span className="w-2 h-2 rounded-full bg-[#2a2a2a]"></span>
                <span>共 {questions.length} 题，请根据真实想法选择</span>
                <span className="w-2 h-2 rounded-full bg-[#2a2a2a]"></span>
              </div>
            </div>

            <div className="mt-12">
              <button
                onClick={handleStart}
                className="group relative inline-flex items-center justify-center
                  bg-[#2a2a2a] text-white px-8 py-3 rounded-full
                  text-sm sm:text-base tracking-wide overflow-hidden
                  transition-all duration-300 ease-out
                  hover:bg-[#1a1a1a] hover:shadow-lg
                  active:transform active:scale-95"
              >
                <span className="relative z-10">开始测试</span>
                <div className="absolute inset-0 bg-gradient-to-r from-[#2a2a2a] to-[#1a1a1a]
                  opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
              </button>
            </div>
          </div>
        ) : result ? (
          <div className="w-full bg-white rounded-2xl shadow-sm p-6 sm:p-8">
            <div className="relative mb-8 text-center">
              <h2 className="text-2xl sm:text-3xl font-bold text-[#2a2a2a]">
                测试结果
              </h2>
              <div className="absolute -bottom-3 left-1/2 transform -translate-x-1/2 w-10 h-[2px] bg-[#2a2a2a]"></div>
            </div>
            
            <div className="space-y-6">
              <div className="text-center space-y-3">
                <div className="inline-block px-4 py-1 bg-[#f8f8f8] rounded-full text-sm text-[#666666]">
                  {CHARACTERS[result].type}
                </div>
                <div className="text-xl sm:text-2xl font-medium text-[#2a2a2a]">
                  {CHARACTERS[result].name}
                </div>
              </div>
              
              <div className="relative p-6 bg-[#f8f8f8] rounded-xl">
                <div className="absolute top-3 left-3 w-6 h-6 border-t-2 border-l-2 border-[#2a2a2a] opacity-30"></div>
                <div className="absolute bottom-3 right-3 w-6 h-6 border-b-2 border-r-2 border-[#2a2a2a] opacity-30"></div>
                <p className="text-[#666666] text-sm sm:text-base leading-relaxed">
                  {CHARACTERS[result].description}
                </p>
              </div>

              <button
                onClick={handleStart}
                className="group relative w-full bg-[#2a2a2a] text-white py-3 
                  rounded-full text-sm sm:text-base tracking-wide
                  transition-all duration-300 ease-out
                  hover:bg-[#1a1a1a] hover:shadow-lg
                  active:transform active:scale-95"
              >
                <span className="relative z-10">重新测试</span>
                <div className="absolute inset-0 bg-gradient-to-r from-[#2a2a2a] to-[#1a1a1a]
                  opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
              </button>
            </div>
          </div>
        ) : (
          <QuestionCard
            question={questions[currentQuestion]}
            onAnswer={handleAnswer}
            currentQuestion={currentQuestion + 1}
            totalQuestions={questions.length}
          />
        )}
      </main>
    </div>
  )
}